<template>
  <div>
    <h3>计算属性</h3>
    <ul>
      <li v-for="item in oddArr" :key="item">{{ item }}</li>
    </ul>
    <button @click="fn">btn</button>
  </div>
</template>

<script>
import { ref, computed } from "vue";
export default {
  setup() {
    const arr = ref([1, 2, 3, 4, 5, 6, 7, 8]);

    // computed是一个函数, 要传入一个回调函数
    // 返回一个计算的结果
    const oddArr = computed(() => {
      return arr.value.filter((item) => item % 2);
    });

    const fn = () => {
      arr.value.push(9);
    };

    return {
      // arr,
      oddArr,
      fn,
    };
  },
};
</script>

<style lang="less" scoped></style>
